<template>
  <div class="wrap">
    <filters
      :update-user-list="updateUserList"
      :get-table-data-source="getTableDataSource"
    ></filters>
    <list-table :user-list="userList"></list-table>
    <modal
      :is-show="showDeleteModal"
      :handle-enter="deleteItem"
      :handle-cancel="handleCancel"
    >
      {{ deleteContent }}
    </modal>
  </div>
</template>

<script>
import { post } from "./../../utils/request";
import Modal from "./../../components/Model";
import Filter from "./components/filter";
import ListTable from "./components/table";

export default {
  name: "filter-list",
  // 与视图相关的动态数据放在data里
  data: () => ({
    userList: [],
    // 控制删除弹窗
    showDeleteModal: false,
    // 被选择的要删除的这一项
    currentSelectDelete: null,
  }),
  // 请求数据
  mounted: function () {
    this.getTableDataSource();
  },
  methods: {
    updateUserList: function (newUserlist) {
      this.userList = newUserlist;
    },
    // 获取table数据
    getTableDataSource: function (params) {
      post("/getAdaList", params).then((data) => {
        if (!Array.isArray(data)) {
          return;
        }
        this.userList = data;
      });
    },
    handleDeleteItem: function (item) {
      this.showDeleteModal = true;
      this.currentSelectDelete = item.name;
    },
    handleCancel: function () {
      this.showDeleteModal = false;
    },
    deleteItem: function (id) {
      post("/deleteAdaById", {
        id,
      }).then((data) => {
        if (data) {
          this.showDeleteModal = false;
          this.getTableDataSource();
        }
      });
    },
  },
  computed: {
    deleteContent: function () {
      return `确认删除${this.currentSelectDelete}吗？`;
    },
  },
  components: {
    filters: Filter,
    listTable: ListTable,
    modal: Modal,
  },
};
</script>

<style scoped></style>
